<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form :inline="true" :model="listQuery" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="listQuery.formulaTypeName"
            clearable
            class="filter-item"
            style="width: 200px"
            @clear="handleFilter"
            :placeholder="$t('配方类型名称')"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            v-permission="['GET /admin/repository/list']"
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
            >{{ $t("Search") }}</el-button
          >

          <el-button
            v-permission="['GET /admin/repository/list']"
            class="filter-item"
            type="primary"
            icon="el-icon-plus"
            @click="handerCreate"
            >{{ $t("添加配方类型") }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="$t('Searching')"
      stripe
      fit
      highlight-current-row
      row-key="id"
    >
       <el-table-column
        type="index"
        :index="getIndex"
        width="200"
        :label="$t('序号')"
      ></el-table-column>

      <template>
        <el-table-column
          align="left"
          min-width="100"
          :label="$t('配方类型名称')"
        >
          <template slot-scope="scope">
            <div class="parent-wrapper">
              <span
                class="circle"
                :style="{ backgroundColor: scope.row.typeColour }"
              ></span>
              <span :style="{ color: scope.row.typeColour }">{{
                scope.row.formulaTypeName
              }}</span>
            </div>
          </template>
        </el-table-column>
      </template>

       <el-table-column
        align="center"
        :label="$t('配方分类')"
        prop="type">
         <template slot-scope="scope">
           {{ getTypeLabel(scope.row.type) }}
         </template>
       </el-table-column>

      <el-table-column
        align="center"
        min-width="100"
        :label="$t('排序')"
        prop="number"
      />

      <el-table-column
        align="center"
        min-width="100"
        :label="$t('备注')"
        prop="remark"
      />

      <el-table-column
        align="center"
        :label="$t('Operate')"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot="header" slot-scope="{ row }">
          {{ $t("Operate") }}
          <i class="el-icon-setting" style="color: #d35e32"></i>
        </template>

        <template slot-scope="scope">
          <el-link
            :underline="false"
            type="primary"
            @click="handerEdit(scope.row)"
            size="small"
            ><i class="el-icon-edit"></i>{{ $t("编辑") }}</el-link
          >

          <el-link
            :underline="false"
            type="danger"
            @click="handerDelete(scope.row)"
            size="small"
            ><i class="el-icon-edit"></i>{{ $t("删除") }}</el-link
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 第一个弹框 -->
    <dic class="dialogCenter">
      <el-dialog
        :title="$t('新建配方类型')"
        :visible.sync="dialogVisible1"
        width="40%"
        :before-close="handleClose"
        :close-on-click-modal ="false"
      >
        <!-- 表单内容 -->
        <div>
          <el-form
            :model="formulaTypeForm"
            :rules="rules"
            ref="formulaTypeForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item :label="$t('配方类型名称')" prop="formulaTypeName">
              <el-input v-model="formulaTypeForm.formulaTypeName"></el-input>
            </el-form-item>

            <el-form-item :label="$t('类型颜色')" prop="typeColour">
              <el-color-picker
                v-model="formulaTypeForm.typeColour"
                show-alpha
                :predefine="predefineColors"
              ></el-color-picker>
            </el-form-item>

            <el-form-item :label="$t('配方分类')" prop="type">
              <el-radio-group v-model="formulaTypeForm.type">
                <el-radio border :label="1" >{{$t('原料')}}</el-radio>
                <el-radio border :label="2" >{{$t('物品')}}</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item :label="$t('序号')">
              <el-input v-model="formulaTypeForm.number"></el-input>
            </el-form-item>

            <el-form-item :label="$t('备注')">
              <el-input
                v-model="formulaTypeForm.remark"
                type="textarea"
                :autosize="{ minRows: 3 }"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                v-if="dialogStatus == 'create'"
                icon="el-icon-check"
                type="primary"
                @click="submitForm('formulaTypeForm')"
                >{{ $t("立即创建") }}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </dic>

    <!-- 第二个弹框 -->
    <dic class="dialogCenter">
      <el-dialog
        :title="$t('编辑')"
        :visible.sync="dialogVisible2"
        :rules="rules"
        width="40%"
        :before-close="handleClose"
        :close-on-click-modal ="false"
      >
        <!-- 表单内容 -->
        <div>
          <el-form
            :model="formulaTypeForm"
            :rules="rules"
            ref="formulaTypeForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item :label="$t('配方类型名称')" prop="formulaTypeName">
              <el-input v-model="formulaTypeForm.formulaTypeName"></el-input>
            </el-form-item>

            <el-form-item :label="$t('类型颜色')" prop="typeColour">
              <el-color-picker
                v-model="formulaTypeForm.typeColour"
                show-alpha
                :predefine="predefineColors"
              ></el-color-picker>
            </el-form-item>

            <el-form-item :label="$t('配方类型')" prop="type">
              <el-radio-group v-model="formulaTypeForm.type">
                <el-radio border :label="1" >{{$t('原料')}}</el-radio>
                <el-radio border :label="2" >{{$t('物品')}}</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item :label="$t('序号')" prop="number">
              <el-input v-model="formulaTypeForm.number"></el-input>
            </el-form-item>

            <el-form-item :label="$t('备注')" prop="remark">
              <el-input
                v-model="formulaTypeForm.remark"
                type="textarea"
                :autosize="{ minRows: 3 }"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                v-if="dialogStatus == 'update'"
                type="primary"
                plain1
                icon="el-icon-edit"
                @click="editCardClassification('formulaTypeForm')"
                >{{ $t("提交编辑") }}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </dic>
  </div>
</template>


  <script>
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { listType, add, update, deleteById } from "@/api/formulaType";
export default {
  name: "repositoryList",
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogStatus: "",
      color: "#409EFF",
      listQuery: {
        page: 1,
        limit: 10,
        classificationName: undefined,
      },
      formulaTypeForm: {
        id: undefined,
        formulaTypeName: undefined,
        typeColour: "#000000",
        type: 1,
        number: undefined,
        remark: undefined,
      },
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ],
      rules: {
        formulaTypeName: [
          {
            required: true,
            message: "请输入配方类型名称",
            trigger: "blur",
          },
        ],
        typeColour: [
          {
            required: true,
            message: "请输入类型颜色",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择类型",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      listType(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    getIndex(index) {
      return index + 1 + (this.listQuery.page - 1) * this.listQuery.limit;
    },
    handleFilter() {
      this.getList();
    },
    handerCreate() {
      this.dialogVisible1 = true;
      this.dialogStatus = "create";
      this.formulaTypeForm = {
        id: undefined,
        formulaTypeName: undefined,
        typeColour: "#000000",
        number: undefined,
        remark: undefined,
      };
    },
    handerCreateSubclass(row) {
      this.dialogVisible1 = true;
      this.dialogStatus = "create";
    },
    handleClose(done) {
      this.getList();
      done();
    },
    handerEdit(row) {
      this.dialogVisible2 = true;
      this.dialogStatus = "update";
      //   this.formulaTypeForm = row;
      this.formulaTypeForm.id = row.id;
      this.formulaTypeForm.formulaTypeName = row.formulaTypeName;
      this.formulaTypeForm.typeColour = row.typeColour;
      this.formulaTypeForm.type = row.type;
      this.formulaTypeForm.number = row.number;
      this.formulaTypeForm.remark = row.remark;
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          add(this.formulaTypeForm)
            .then((res) => {
              if (res.data.data == 100) {
                this.$notify({
                  title: "警告",
                  message: "这是一条警告的提示消息",
                  type: "warning",
                });
              } else {
                this.dialogVisible1 = false;
                this.$notify({
                  title: "成功",
                  message: "添加成功",
                  type: "success",
                });
                this.$refs["formulaTypeForm"].resetFields();
                this.getList();
              }
            })
            .catch((error) => {
              console.error("请求错误：", error);
              if (error.data.errno == 1003) {
                this.$notify.error({
                  title: "错误",
                  message: error.data.errmsg,
                });
              } else {
                this.$notify.error({
                  title: "错误",
                  message: "创建失败",
                });
              }
              // this.$notify.error({
              //   title: "错误",
              //   message: "创建失败",
              // });
            });
        } else {
          return false;
        }
      });
    },

    editCardClassification(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          update(this.formulaTypeForm)
            .then((res) => {
              this.dialogVisible2 = false;
              this.$notify({
                title: "成功",
                message: "编辑成功",
                type: "success",
              });
              this.getList();
            })
            .catch((error) => {
              console.error("请求错误：", error);
              if (error.data.errno == 1003) {
                this.$notify.error({
                  title: "错误",
                  message: error.data.errmsg,
                });
              } else {
                this.$notify.error({
                  title: "错误",
                  message: "编辑失败",
                });
              }
              // this.$notify.error({
              //   title: "错误",
              //   message: "编辑失败",
              // });
            });
        } else {
          return false;
        }
      });
    },

    handerDelete(row) {
      console.log(1231123321);
      console.log(row);
      console.log(row.id);
      var id = row.id;
      var formulaTypeForm = {
        id: row.id,
      };
      //   if (row.classificationStatus == 0) {
      //     this.$notify({
      //       title: "警告",
      //       message: "该分类已启动！",
      //       type: "warning",
      //     });
      //     return;
      //   }
      this.$confirm("确认删除？")
        .then((_) => {
          deleteById(formulaTypeForm)
            .then((res) => {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
              });
              this.getList();
            })
            .catch((res) => {
              this.$notify.error({
                title: "错误",
                message: "删除失败",
              });
            });
        })
        .catch((_) => {});
    },
  },
  filters: {},
  computed: {
    // 定义映射对象模拟枚举的对应关系
    typeMap() {
      return {
        1: '原料',
        2: '物品'
      };
    },
    // 计算属性根据type值获取对应的显示标签
    getTypeLabel() {
      return (type) => {
        return this.typeMap[type] || '未知类型'; // 如果不存在对应映射则显示未知类型
      };
    }
  }
};
</script>
      <style scoped>
</style>

    <style>
.circle {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 10px;
}
.parent-wrapper {
  display: flex;
  align-items: center;
  justify-content: left; /* 在水平方向上居中对齐 */
}
</style>
